<template>
  <div class="error-page"
       :style="emptyStyle">

    <!-- v-on:click.prevent -->
    <div class="error-page-content"
         :style="comtentStyle">
      <a href="javascript:void(0)"><img :src="emptyImgSrc"
             :style="imgSize"
             v-if="type!== 'allHide'"
             alt="emptyimg"></a>
      <span class="error-page-content-text"
            v-if="type === 'all' || type === 'text'"
            v-html="emptyDesc"></span>

      <div class="error-page-content-btn"
           v-if="(type === 'all' || type === 'button') && btn === true"
           @click.stop="retry()">{{emptyBtnDesc}}</div>
      <slot>
        <div></div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'error-page',
  data () {
    return {
      visible: false
    }
  },
  props: {
    type: {
      default: 'text'
    },
    emptyBtnDesc: {
      default: '重新加载'
    },
    imgWidth: {
      default: 0
    },
    imgHeight: {
      default: 0
    },
    top: {
      default: 0
    },
    left: {
      default: 0
    },
    right: {
      default: 0
    },
    bottom: {
      default: 0
    },
    translateY: {
      default: 100
    },
    /**
       * 自定义背景颜色，默认为white
       */
    emptybgcolor: {
      default: 'white'
    },
    /**
       * 用于显示的图片，现在只支持的图片有
       * sp:商品
       * search:搜索为空
       * sp-pl:商品评论
       * syhd:试用活动
       * zsjm:招商加盟
       * zypx:专业培训
       * xyfl:学院分类
       */
    emptyImg: {
      default: 'empty-active'
    },
    emptyDesc: {
      default: '暂无符合的商品'
    },
    btn: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      default: 100
    }
  },
  computed: {
    imgSize () {
      return {
        width: this.px2rem(this.imgWidth),
        height: this.px2rem(this.imgHeight)
      }
    },
    emptyStyle: function () {
      let self = this
      let cls = {
        top: self.px2rem(self.top),
        left: self.px2rem(self.left),
        right: self.px2rem(self.right),
        bottom: self.px2rem(self.bottom),
        background: self.emptybgcolor,
        zIndex: self.zIndex
      }
      return cls
    },
    comtentStyle: function () {
      let self = this
      let cls = {
        transform: 'translateY(' + '-' + self.px2rem(self.translateY) + ')'
      }
      return cls
    },
    emptyImgSrc: function () {
      if (this.emptyImg.indexOf('.') > -1) {
        return require(`@image/${this.emptyImg}`)
      } else {
        return require(`@image/${this.emptyImg}.png`)
      }
    }
  },
  methods: {
    px2rem (px) {
      let rem = 100
      return `${px / rem}rem`
    },
    retry () {
      this.$emit('subClick')
    }
  }
}
</script>


<style lang="stylus">
.error-page {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 190;

  .error-page-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .error-page-content-text {
      font-size: 28px;
      color: rgba(255, 176, 173, 1);
    }

    .error-page-content-btn {
      border-radius: 10px;
      border: 1px solid rgba(251, 215, 213, 1);
      font-size: 28px;
      color: rgba(255, 176, 173, 1);
      padding: 10px 41px 10px 41px;
      margin-top: 28px;
      border-radius: 100px;
    }

    img {
      width: 150px;
      height: 150px;
    }

    span {
      margin-top: 30px;
      margin-left: 30px;
      margin-right: 30px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      color: #999999;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>
